<template>
    <div class="userBox">
        <div class="usersTitle">
            <div class="titleText">{{ pageName }}</div>
            <div class="titlesBrn">
                <el-button class="titlesBrn" type="primary" size="mini" @click="toAddUsers">新增接口</el-button>
            </div>
        </div>
        <div v-if="pageData">
            <el-table :data="pageData.items" style="width: 100%" header-row-class-name="elTableStyle">
                <el-table-column prop="name" label="接口名称"> </el-table-column>
                <el-table-column prop="requestUrl" label="请求url"> </el-table-column>
                <el-table-column prop="userCreate" label="创建人">
                    <template slot-scope="scope">
                        {{ getUserName(scope.row.userCreateId) }}
                    </template>
                </el-table-column>
                <el-table-column prop="userModified" label="修改人">
                    <template slot-scope="scope">
                        {{ getUserName(scope.row.userModifiedId) }}
                    </template>
                </el-table-column>
                <el-table-column prop="version" label="版本号"> </el-table-column>
                <el-table-column prop="remarks" label="备注"> </el-table-column>
                <el-table-column prop="address" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handlClick(scope.row, '1')">查看</el-button>
                        <el-button type="text" @click="handlClick(scope.row, '2')">修改</el-button>
                        <el-button type="text" @click="handlClick(scope.row, '3')">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination :totalNum="pageData.totalNum" @paginaClick="paginaClickTable"></pagination>
        </div>
    </div>
</template>
<script lang="ts">
import publicFunction from '../../utils/publicFunction'
export default {
    data() {
        return {
            pageData: '',
            pageNum: 1,
            pageName: '接口文档',
            userList: ''
        }
    },
    mounted() {
        ;(this as any).getUserList()
        ;(this as any).getApiList()
        ;(this as any).pageName = (this as any).$route.params.name
    },
    computed: {
        getUserName() {
            return (id: string) => {
                let user = (this as any).userList.filter((item: any) => {
                    if (item.id == id) {
                        return item
                    }
                })
                if (user.length > 0) {
                    return user[0].name
                } else {
                    return ''
                }
            }
        }
    },
    methods: {
        paginaClickTable(val: string | number) {
            ;(this as any).pageNum = val
            ;(this as any).getApiList()
        },
        toAddUsers() {
            if ((this as any).$isAdmin()) {
                ;(this as any).$router.push(`/apiword/editorapiword?projectId=${(this as any).$route.params.id}`)
            } else {
                ;(this as any).$alert('你无权进行此操作！请联系管理员')
            }
        },
        getApiList() {
            ;(this as any).$request
                .get('/api/oa/doc/getInterfaceDocByProjectId', {
                    projectId: (this as any).$route.params.id,
                    pageNum: (this as any).pageNum,
                    pageSize: (this as any).$setTing.paging.pageSize
                })
                .then((res: any): void => {
                    if (res.code == 200) {
                        ;(this as any).pageData = res.data
                        // console.log((this as any).pageData.totalNum)
                    }
                })
        },
        // 获取用户列表
        getUserList(): void {
            ;(this as any).$request.get('/api/oa/users/list').then((res: any): void => {
                if (res.code == 200) {
                    ;(this as any).userList = res.data
                    // console.log((this as any).userList)
                    // this.userValue = (this as any).userList[0].id
                }
            })
        },
        handlClick(row: any, type: string) {
            // 查看
            if (type == '1') {
                ;(this as any).$router.push(`/apiword/examineapi?apiId=${row.id}&docId=${row.docId}&name=${row.name}`)
            } else if (type == '2') {
                // 修改
                ;(this as any).$router.push(`/apiword/editorapiword?projectId=${(this as any).$route.params.id}&apiId=${row.id}&docId=${row.docId}`)
            } else if (type == '3') {
                // 删除
                ;(this as any)
                    .$confirm('确定要删除该接口吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                    .then(() => {
                        ;(this as any).$request
                            .postForm('/api/oa/doc/deleteInterfaceDocById', {
                                id: row.id
                            })
                            .then((res: any): void => {
                                if (res.code == 200) {
                                    ;(this as any).pageNum = publicFunction.setDeletePageNum((this as any).pageData.totalNum, (this as any).$setTing.paging.pageSize)
                                    ;(this as any).getApiList()
                                    ;(this as any).$message.success('删除成功')
                                    // console.log((this as any).userList)
                                    // this.userValue = (this as any).userList[0].id
                                }
                            })
                    })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.userBox {
    background: #ffffff;
    padding: 20px;
    .usersTitle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;
        margin-bottom: 25px;
        padding-bottom: 15px;
        .titleText {
            font-weight: 600;
        }
        .titlesBrn {
            width: 100px;
        }
    }
    .userHeadImg {
        width: 100px;
        height: 100px;
        border-radius: 5px;
        cursor: pointer;
    }
}
</style>
<style>
.userBox .elTableStyle {
    color: #333333;
}
.userBox .elTableStyle th {
    background: #f5f5f5;
    text-align: center;
}
.userBox table tr td .cell {
    text-align: center !important;
}
</style>
